<template>
  <view class="course-detail-page">
    <!-- 课程封面 -->
    <view class="course-cover">
      <image class="cover-image" :src="course.cover" mode="aspectFill" />
      <view class="cover-overlay">
        <view class="play-btn">▶️</view>
      </view>
    </view>
    
    <!-- 课程信息 -->
    <view class="course-info">
      <text class="course-title">{{ course.title }}</text>
      <view class="course-meta">
        <text class="instructor">讲师：{{ course.instructor }}</text>
        <text class="rating">⭐ {{ course.rating }}</text>
        <text class="students">{{ course.students }}人学习</text>
      </view>
      <view class="course-price">
        <text class="current-price">¥{{ course.price }}</text>
        <text class="original-price">¥{{ course.originalPrice }}</text>
        <text class="discount">{{ getDiscount() }}折</text>
      </view>
    </view>
    
    <!-- 课程介绍 -->
    <view class="course-section">
      <view class="section-title">课程介绍</view>
      <text class="course-description">{{ course.description }}</text>
    </view>
    
    <!-- 课程大纲 -->
    <view class="course-section">
      <view class="section-title">课程大纲</view>
      <view class="chapter-list">
        <view 
          v-for="chapter in course.chapters" 
          :key="chapter.id"
          class="chapter-item"
        >
          <view class="chapter-header">
            <text class="chapter-title">{{ chapter.title }}</text>
            <text class="chapter-duration">{{ chapter.duration }}</text>
          </view>
          <view class="lesson-list">
            <view 
              v-for="lesson in chapter.lessons" 
              :key="lesson.id"
              class="lesson-item"
            >
              <text class="lesson-title">{{ lesson.title }}</text>
              <text class="lesson-duration">{{ lesson.duration }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 讲师信息 -->
    <view class="course-section">
      <view class="section-title">讲师介绍</view>
      <view class="instructor-info">
        <image class="instructor-avatar" :src="course.instructorAvatar" mode="aspectFill" />
        <view class="instructor-details">
          <text class="instructor-name">{{ course.instructor }}</text>
          <text class="instructor-title">{{ course.instructorTitle }}</text>
          <text class="instructor-bio">{{ course.instructorBio }}</text>
        </view>
      </view>
    </view>
    
    <!-- 学员评价 -->
    <view class="course-section">
      <view class="section-title">学员评价</view>
      <view class="review-list">
        <view 
          v-for="review in course.reviews" 
          :key="review.id"
          class="review-item"
        >
          <view class="review-header">
            <image class="reviewer-avatar" :src="review.avatar" mode="aspectFill" />
            <view class="reviewer-info">
              <text class="reviewer-name">{{ review.name }}</text>
              <text class="review-rating">⭐ {{ review.rating }}</text>
            </view>
            <text class="review-time">{{ review.time }}</text>
          </view>
          <text class="review-content">{{ review.content }}</text>
        </view>
      </view>
    </view>
    
    <!-- 底部操作栏 -->
    <view class="bottom-actions">
      <view class="action-left">
        <view class="action-btn" @click="toggleFavorite">
          <text class="action-icon">{{ course.isFavorite ? '❤️' : '🤍' }}</text>
          <text class="action-text">收藏</text>
        </view>
        <view class="action-btn" @click="shareCourse">
          <text class="action-icon">📤</text>
          <text class="action-text">分享</text>
        </view>
      </view>
      <view class="action-right">
        <view class="buy-btn" @click="buyCourse">立即购买</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const course = ref({
  id: 1,
  title: 'Vue3 + TypeScript 实战课程',
  instructor: '张老师',
  instructorTitle: '高级前端工程师',
  instructorBio: '拥有8年前端开发经验，精通Vue、React、TypeScript等前端技术栈，曾就职于知名互联网公司。',
  instructorAvatar: 'https://via.placeholder.com/100x100/ff6b35/ffffff?text=张',
  cover: 'https://via.placeholder.com/750x400/ff6b35/ffffff?text=Vue3课程',
  price: 299,
  originalPrice: 399,
  rating: 4.8,
  students: 1234,
  description: '本课程将带你深入学习Vue3和TypeScript的核心概念和实战应用。通过项目实战，掌握现代前端开发技能，提升开发效率和代码质量。',
  isFavorite: false,
  chapters: [
    {
      id: 1,
      title: '第一章：Vue3基础入门',
      duration: '2小时',
      lessons: [
        { id: 1, title: '1.1 Vue3简介和新特性', duration: '30分钟' },
        { id: 2, title: '1.2 组合式API基础', duration: '45分钟' },
        { id: 3, title: '1.3 响应式系统', duration: '45分钟' }
      ]
    },
    {
      id: 2,
      title: '第二章：TypeScript集成',
      duration: '3小时',
      lessons: [
        { id: 4, title: '2.1 TypeScript基础语法', duration: '60分钟' },
        { id: 5, title: '2.2 Vue3 + TypeScript', duration: '60分钟' },
        { id: 6, title: '2.3 类型定义和接口', duration: '60分钟' }
      ]
    }
  ],
  reviews: [
    {
      id: 1,
      name: '学习达人',
      avatar: 'https://via.placeholder.com/60x60/ff6b35/ffffff?text=学',
      rating: 5.0,
      time: '2024-01-15',
      content: '老师讲解非常详细，课程内容很实用，学到了很多！'
    },
    {
      id: 2,
      name: '前端小白',
      avatar: 'https://via.placeholder.com/60x60/ff6b35/ffffff?text=前',
      rating: 4.8,
      time: '2024-01-14',
      content: '作为初学者，这个课程帮助很大，推荐！'
    }
  ]
})

onMounted(() => {
  // 获取课程ID参数
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1]
  const courseId = currentPage.options?.courseId
  if (courseId) {
    // 根据courseId加载课程数据
    console.log('加载课程ID:', courseId)
  }
})

const getDiscount = () => {
  return Math.round((course.value.price / course.value.originalPrice) * 10)
}

const toggleFavorite = () => {
  course.value.isFavorite = !course.value.isFavorite
  uni.showToast({ 
    title: course.value.isFavorite ? '已收藏' : '已取消收藏', 
    icon: 'success' 
  })
}

const shareCourse = () => {
  uni.showToast({ title: '分享功能', icon: 'none' })
}

const buyCourse = () => {
  uni.showModal({
    title: '购买课程',
    content: `确定要购买"${course.value.title}"吗？`,
    success: (res) => {
      if (res.confirm) {
        uni.showToast({ title: '跳转到支付页面', icon: 'none' })
      }
    }
  })
}
</script>

<style scoped>
.course-detail-page {
  background: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 120rpx;
}
.course-cover {
  position: relative;
  height: 400rpx;
}
.cover-image {
  width: 100%;
  height: 100%;
}
.cover-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}
.play-btn {
  font-size: 80rpx;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  width: 120rpx;
  height: 120rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.course-info {
  background: #fff;
  padding: 30rpx;
  margin-bottom: 20rpx;
}
.course-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
  display: block;
  line-height: 1.4;
}
.course-meta {
  display: flex;
  align-items: center;
  gap: 30rpx;
  margin-bottom: 20rpx;
}
.instructor, .rating, .students {
  font-size: 24rpx;
  color: #666;
}
.rating {
  color: #ff6b35;
}
.course-price {
  display: flex;
  align-items: center;
  gap: 20rpx;
}
.current-price {
  font-size: 48rpx;
  font-weight: bold;
  color: #ff6b35;
}
.original-price {
  font-size: 28rpx;
  color: #999;
  text-decoration: line-through;
}
.discount {
  background: #ff4757;
  color: #fff;
  font-size: 22rpx;
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
}
.course-section {
  background: #fff;
  margin-bottom: 20rpx;
  padding: 30rpx;
}
.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}
.course-description {
  font-size: 26rpx;
  color: #666;
  line-height: 1.6;
}
.chapter-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}
.chapter-item {
  border: 1rpx solid #f0f0f0;
  border-radius: 15rpx;
  overflow: hidden;
}
.chapter-header {
  background: #f8f8f8;
  padding: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.chapter-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}
.chapter-duration {
  font-size: 24rpx;
  color: #999;
}
.lesson-list {
  padding: 0 20rpx;
}
.lesson-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}
.lesson-item:last-child {
  border-bottom: none;
}
.lesson-title {
  font-size: 26rpx;
  color: #333;
  flex: 1;
}
.lesson-duration {
  font-size: 24rpx;
  color: #999;
}
.instructor-info {
  display: flex;
  gap: 20rpx;
}
.instructor-avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
}
.instructor-details {
  flex: 1;
}
.instructor-name {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
  display: block;
}
.instructor-title {
  font-size: 24rpx;
  color: #666;
  margin-bottom: 15rpx;
  display: block;
}
.instructor-bio {
  font-size: 24rpx;
  color: #666;
  line-height: 1.5;
}
.review-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}
.review-item {
  border-bottom: 1rpx solid #f0f0f0;
  padding-bottom: 20rpx;
}
.review-item:last-child {
  border-bottom: none;
}
.review-header {
  display: flex;
  align-items: center;
  margin-bottom: 15rpx;
}
.reviewer-avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  margin-right: 15rpx;
}
.reviewer-info {
  flex: 1;
}
.reviewer-name {
  font-size: 26rpx;
  color: #333;
  margin-bottom: 5rpx;
  display: block;
}
.review-rating {
  font-size: 22rpx;
  color: #ff6b35;
}
.review-time {
  font-size: 22rpx;
  color: #999;
}
.review-content {
  font-size: 26rpx;
  color: #666;
  line-height: 1.5;
}
.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  padding: 20rpx 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1rpx solid #f0f0f0;
}
.action-left {
  display: flex;
  gap: 40rpx;
}
.action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.action-icon {
  font-size: 40rpx;
  margin-bottom: 8rpx;
}
.action-text {
  font-size: 22rpx;
  color: #666;
}
.buy-btn {
  background: #ff6b35;
  color: #fff;
  padding: 25rpx 60rpx;
  border-radius: 50rpx;
  font-size: 28rpx;
  font-weight: bold;
}
</style>
